<template>
  <div class="app">
    <!-- 面包屑导航区域 开始 -->
    <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>书籍管理</el-breadcrumb-item>
      <el-breadcrumb-item>书籍删除管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 面包屑导航区域 开始 -->
    <!-- table数据展示 开始 -->
    <div>
      <el-table v-loading="loading" :data="bookTableData" style="width: 100%">
        <el-table-column fixed type="index" width="50"> </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="bookName"
          label="书籍名称"
          width="150"
        >
        </el-table-column>
        <el-table-column prop="bookAuthor" label="书籍作者" width="120">
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="bookIntroduction"
          label="书籍简介"
          width="120"
        >
        </el-table-column>
        <el-table-column prop="" label="书籍封面" width="120">
          <template slot-scope="scope">
            <img
              :src="scope.row.bookCover"
              width="80px"
              height="100px"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column prop="bookLaunchTime" label="书籍上架时间" width="155">
          <template slot-scope="scope">
            {{ scope.row.bookLaunchTime }}
          </template>
        </el-table-column>
        <el-table-column prop="bookEndOrSerial" label="完结或连载" width="120">
          <template slot-scope="scope">
            <div :class="scope.row.bookEndOrSerial == 2 ? 'end' : 'serial'">
              {{ scope.row.bookEndOrSerial == 1 ? '连载中' : '已完结' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="bookNumberOfWords" label="字数总数" width="120">
        </el-table-column>
        <el-table-column prop="bookNumberOfHits" label="点击数" width="120">
        </el-table-column>
        <el-table-column prop="bookToUpdate" label="最新更新时间" width="155">
          <template slot-scope="scope">
            {{
              scope.row.bookToUpdate == '1970-01-1 8:0:0'
                ? '暂无更新'
                : scope.row.bookToUpdate
            }}
          </template>
        </el-table-column>
        <el-table-column prop="bookGeneralSection" label="总章节" width="120">
        </el-table-column>
        <el-table-column prop="bookClassification" label="书籍分类" width="120">
        </el-table-column>
        <el-table-column prop="bookCollection" label="收藏数" width="120">
        </el-table-column>
        <el-table-column prop="bookStatus" label="书籍状态" width="120">
          <template slot-scope="scope">
            <el-dropdown>
              <el-button
                size="mini"
                :type="scope.row.bookStatus == 1 ? 'primary' : 'danger'"
              >
                {{ scope.row.bookStatus == 1 ? '上架中' : '已下架'
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown"> </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="230">
          <template slot-scope="scope">
            <el-button
              size="mini"
              class="my-el-button-default"
              @click="handleRecovery(scope.$index, scope.row)"
              >恢复</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- table数据展示 结束 -->
    <!-- 分页 开始-->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryBookCondition.page"
        :page-sizes="[5, 10, 15, 30]"
        :page-size="queryBookCondition.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 分页 结束-->
  </div>
</template>
<script>
import {
  bookQueryPage,
  bookQueryTotal,
  bookModify,
  removeBookById
} from '@/network/bookManager'
import { timeStampFormatStr } from '@/util/dataTimeUtil'
export default {
  data() {
    return {
      // 表格数据
      bookTableData: [],
      // table加载动画
      loading: false,
      // 条件对象
      queryBookCondition: {
        page: 1,
        size: 5,
        search: '',
        bookStatus: 1
      },
      total: 0,
      role: {},
      user: {}
    }
  },
  methods: {
    // 查询书籍信息
    async queryBook() {
      this.loading = true // 开启loading
      if (this.role.roleName != '超级管理员') {
        this.queryBookCondition.authorId = this.user._id
      }
      let res = await bookQueryPage(this.queryBookCondition)
      console.info(res)
      let resTotal = await bookQueryTotal(this.queryBookCondition)
      if (res.errcode !== 0 || res.errmsg != 'ok')
        return this.$message.warning('页面加载错误，请刷新当前页面')
      this.bookTableData = [] // 置空原数据
      this.total = resTotal.count // 设置总数
      for (let rs in res.data) {
        this.bookTableData.push(JSON.parse(res.data[rs]))
        this.bookTableData[rs].bookLaunchTime = this.timeStampFormatStr(
          this.bookTableData[rs].bookLaunchTime.$date
        )
        this.bookTableData[rs].bookToUpdate =
          this.timeStampFormatStr(this.bookTableData[rs].bookToUpdate.$date) ==
          '1970-01-1 8:0:0'
            ? '暂无更新'
            : this.timeStampFormatStr(this.bookTableData[rs].bookToUpdate.$date)
      }
      this.loading = false // 关闭loading
    },
    timeStampFormatStr,
    // 恢复 小说
    handleRecovery(index, item) {
      this.$confirm('此操作将永久修改该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          item.bookStatus = 1
          bookModify(item)
          this.bookTableData.splice(index, 1)
          this.$message.success('恢复成功')
          this.queryBook()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })

      console.info(index)
      console.info(item)
    },
    // 删除小说 真正的删除
    handleDelete(index, item) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          console.info(index)
          removeBookById(item._id)
          this.bookTableData.splice(index, 1)
          this.$message.success('删除成功')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      console.info(item)
    },
    // size数据改变
    handleSizeChange(val) {
      this.queryBookCondition.size = val
    },
    // 翻页
    handleCurrentChange(val) {
      this.queryBookCondition.page = val
    }
  },
  // 监听属性
  watch: {
    'queryBookCondition.page': {
      // 页码发生变化
      handler: function() {
        this.queryBook()
      }
    },
    'queryBookCondition.size': {
      // 每页多少条发生变化
      handler: function() {
        this.queryBook()
      }
    }
  },
  mounted() {
    this.role = JSON.parse(sessionStorage.getItem('role'))
    console.info(this.role)
    this.user = JSON.parse(sessionStorage.getItem('user'))
    this.queryBook()
  }
}
</script>
<style lang="less" scoped></style>
